<template>
  <div class="map" id="map"></div>
</template>

<script>
import "ol/ol.css";
import Map from "ol/Map";
import layerTile from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import TileArcGISRest from "ol/source/TileArcGISRest";
import TileLayer from "ol/layer/Tile";
import View from "ol/View";
import { Vector as VectorLayer } from "ol/layer";
import { Icon, Style } from "ol/style";
import VectorSource from "ol/source/Vector";
import Point from "ol/geom/Point";
import Feature from "ol/Feature";

import CONSTANT from "@/config/constant.js";
import mapData from "./data.js";
import pointImg from "@/images/device.png";

export default {
  name: "customLayer",
  data() {
    return {
      map: null
    };
  },

  methods: {
    //初始化地图
    init() {
      this.map = new Map({
        target: "map",
        layers: [
          // new TileLayer({
          //   source: new TileArcGISRest({
          //     url: CONSTANT.GIS_URL
          //   })
          // })
          new layerTile({
            source: new OSM(),
          }),
        ],
        view: new View({
          center: [113.0567, 23.67537],
          maxZoom: 18,
          minZoom: 8,
          zoom: 13,
          projection: "EPSG:4326"
        })
      });

      this.showPoints();
    },

    //展示点位
    showPoints() {
      const vectorLayer = new VectorLayer({
        source: new VectorSource(),
        style: feature => {
          return [
            new Style({
              image: new Icon({
                src: pointImg
              })
            })
          ];
        }
      });

      let features = [];
      mapData.forEach(item => {
        if (item.gps_x != "" && item.gps_y != "") {
          let newObj = Object.assign({}, item);
          newObj.geometry = new Point([Number(item.gps_x), Number(item.gps_y)]);
          features.push(new Feature(newObj));
        }
      });

      vectorLayer.getSource().addFeatures(features);
      this.map.addLayer(vectorLayer);

      /* 
        mapData是数组，每一项结构：
        {
            "domain_id": 10000029,
            "domain_name": "深圳市第一看守所",
            "domain_type_name": "看守所",
            "gps_x": "113.0131",
            "gps_y": "23.71433",
            "count": 0,
            "channel_id": "",
            "group_idx": 1
        } */
    }
  },

  mounted() {
    this.init();
  }
};
</script>

<style lang="less" scoped>
.map {
  height: 100%;
}
</style>